<template>
  <view class="package-container">
    <view class="package-header">
      <view class="header-bg">
        <image 
          src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
          mode="aspectFill" 
          class="header-image"
        ></image>
        <view class="header-overlay"></view>
        <view class="header-content">
          <text class="header-title">精选套餐</text>
          <text class="header-subtitle">超值优惠 限时抢购</text>
        </view>
      </view>
    </view>
    
    <view class="package-tabs">
      <u-tabs 
        :list="tabList" 
        :current="currentTab" 
        @change="changeTab"
        lineColor="#007aff"
        activeStyle="{'color': '#007aff'}"
        inactiveStyle="{'color': '#666'}"
      ></u-tabs>
    </view>
    
    <view class="package-list">
      <view 
        class="package-item" 
        v-for="pkg in filteredPackages" 
        :key="pkg.id"
        @click="selectPackage(pkg)"
      >
        <view class="package-header">
          <text class="package-name">{{ pkg.name }}</text>
          <u-tag :text="pkg.tag" type="warning" size="mini" />
        </view>
        
        <view class="package-content">
          <text class="package-desc">{{ pkg.description }}</text>
          <view class="package-price">
            <text class="price">¥{{ pkg.price }}</text>
            <text class="original-price">¥{{ pkg.originalPrice }}</text>
          </view>
        </view>
        
        <view class="package-footer">
          <text class="sales-text">已售{{ pkg.sales }}份</text>
          <view class="package-actions">
            <u-button type="primary" size="mini" @click.stop="buyPackage(pkg)">立即购买</u-button>
            <u-button type="info" size="mini" plain @click.stop="addToCart(pkg)">加入购物车</u-button>
          </view>
        </view>
      </view>
    </view>
    
    <view class="cart-float" @click="goToCart" v-if="cartCount > 0">
      <u-badge :count="cartCount" :offset="[-10, -10]"></u-badge>
      <u-icon name="shopping-cart" size="30" color="#fff"></u-icon>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 当前选中的tab
const currentTab = ref(0)

// tab列表
const tabList = ref([
  { name: '全部套餐' },
  { name: '热销套餐' },
  { name: '新客专享' },
  { name: '会员专享' }
])

// 套餐列表数据
const packageList = ref([
  {
    id: 'P001',
    name: '标准洗车套餐',
    tag: '热销',
    description: '清水冲洗、泡沫清洁、清水冲漂、风干',
    price: 15,
    originalPrice: 20,
    sales: 1234,
    category: 0
  },
  {
    id: 'P002',
    name: '深度清洁套餐',
    tag: '推荐',
    description: '标准洗车+打蜡服务',
    price: 25,
    originalPrice: 35,
    sales: 856,
    category: 0
  },
  {
    id: 'P003',
    name: '至尊洗车套餐',
    tag: '豪华',
    description: '深度清洁+内饰吸尘+玻璃清洁',
    price: 35,
    originalPrice: 50,
    sales: 432,
    category: 0
  },
  {
    id: 'P004',
    name: '新客首单套餐',
    tag: '新客专享',
    description: '标准洗车服务，新用户专享',
    price: 10,
    originalPrice: 20,
    sales: 567,
    category: 2
  },
  {
    id: 'P005',
    name: '会员尊享套餐',
    tag: '会员专享',
    description: '至尊洗车+打蜡+内饰深度清洁',
    price: 58,
    originalPrice: 88,
    sales: 234,
    category: 3
  }
])

// 购物车数量
const cartCount = ref(3)

// 根据tab筛选套餐
const filteredPackages = computed(() => {
  if (currentTab.value === 0) {
    return packageList.value
  }
  
  return packageList.value.filter(pkg => pkg.category === currentTab.value)
})

// 切换tab
const changeTab = (index: number) => {
  currentTab.value = index
}

// 选择套餐
const selectPackage = (pkg: any) => {
  uni.showToast({ title: `选择了${pkg.name}`, icon: 'none' })
}

// 购买套餐
const buyPackage = (pkg: any) => {
  uni.showToast({ title: `购买${pkg.name}`, icon: 'none' })
}

// 加入购物车
const addToCart = (pkg: any) => {
  cartCount.value++
  uni.showToast({ title: `已加入购物车`, icon: 'success' })
}

// 跳转到购物车
const goToCart = () => {
  uni.showToast({ title: '跳转到购物车', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.package-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.package-header {
  position: relative;
  
  .header-bg {
    position: relative;
    height: 300rpx;
    
    .header-image {
      width: 100%;
      height: 100%;
    }
    
    .header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    }
    
    .header-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 100%;
      z-index: 2;
      
      .header-title {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 20rpx;
      }
      
      .header-subtitle {
        font-size: 28rpx;
        color: rgba(255,255,255,0.9);
      }
    }
  }
}

.package-tabs {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.package-list {
  padding: 0 20rpx 20rpx;
  
  .package-item {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    
    .package-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .package-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .package-content {
      margin-bottom: 20rpx;
      
      .package-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .package-price {
        display: flex;
        align-items: center;
        
        .price {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff6600;
          margin-right: 10rpx;
        }
        
        .original-price {
          font-size: 26rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
    
    .package-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .sales-text {
        font-size: 24rpx;
        color: #999;
      }
      
      .package-actions {
        display: flex;
        gap: 20rpx;
      }
    }
  }
}

.cart-float {
  position: fixed;
  bottom: 60rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.3);
  z-index: 999;
}
</style>